<template>
  <el-table :data="tableData" :height="tableHeight" border stripe>
    <el-table-column type="index" />
    <el-table-column
      align="center"
      v-for="(col, index) in rowHeader"
      :key="index"
      :prop="col.prop"
      :label="col.label"
    >
      <template slot-scope="{ $index, row }">
        <ExSlot
          v-if="col.render"
          :render="col.render"
          :row="row"
          :index="$index"
          :column="col"
        ></ExSlot>
        <span v-else>
          {{ row[col.prop] }}
        </span>
      </template>
    </el-table-column>
    <slot>
      <el-table-column label="操作" align="center" width="100">
        <template slot-scope="{ row }">
          <Popconfirm @confirm="edit(row)">
            <a-button type="link"> 编辑 </a-button>
          </Popconfirm>
        </template>
      </el-table-column>
    </slot>
  </el-table>
</template>

<script>
// 自定义内容的组件
const ExSlot = {
  functional: true,
  props: {
    row: Object,
    render: Function,
    index: Number,
    column: {
      type: Object,
      default: null,
    },
  },

  render: (h, { props }) => {
    const params = {
      row: props.row,
      index: props.index,
    };

    if (props.column) params.column = props.column;
    return props.render(h, params);
  },
};

export default {
  name: "Table",
  props: {
    rowHeader: Array,
    tableData: Array,
    tableHeight: String,
  },
  components: {
    ExSlot,
  },
  methods: {
    edit(row) {
      this.$emit("edit", row);
    },
  },
};
</script>

<style>
</style>